<template>
    <LoadPage :show="show" />
    <view class="main">
        <view class="pro dispaly-center common">
            <view class="pro-cover">
                <image :src="orderDetail.image" mode="aspectFill" />
            </view>
            <view class="pro-right dispaly-column-between">
                <view class="dispaly-just-between pro-top">
                    <view class="name">{{ orderDetail.serviceName }}</view>
                    <view class="num">×{{ orderDetail.num }}</view>
                </view>
                <view class="dispaly-just-between pro-bottom">
                    <view class="spec">规格选择：{{ orderDetail.specName }}</view>
                    <view class="price">￥{{ orderDetail.totalMoney }}</view>
                </view>
            </view>
        </view>
        <view class="common order-info">
            <view class="title-box dispaly-center">
                <view class="line"></view>
                <view class="title">订单信息</view>
            </view>
            <view class="desc">
                <view class="item one dispaly" v-if="orderDetail.addr">
                    <view class="left co">服务点信息</view>
                    <view class="right">
                        <view class="right-item co1"> {{ orderDetail.addr.name }}</view>
                        <view class="right-item co1"> {{ orderDetail.addr.address }}</view>
                        <view class="right-item co1"> {{ orderDetail.addr.phone }}</view>
                    </view>
                </view>
                <view class="item dispaly-just-between">
                    <view class="left co">订单编号</view>
                    <view class="right co1">{{ orderDetail.orderNo }} </view>
                </view>
                <view class="item dispaly-just-between">
                    <view class="left co">创建时间</view>
                    <view class="right co1">{{ orderDetail.createTime }}</view>
                </view>
                <view class="item dispaly-just-between" v-if="orderDetail.beginTime">
                    <view class="left co">开工时间</view>
                    <view class="right co1">{{ orderDetail.beginTime }}</view>
                </view>
            </view>
        </view>
        <view class="common order-info">
            <view class="title-box dispaly-just-between">
                <view class="dispaly-center ">
                    <view class="line"></view>
                    <view class="title">服务流程</view>
                </view>
                <view class="more" v-if="orderDetail.flows">{{ '共' + orderDetail.flowCount + '项' + '完成' +
                    orderDetail.finishCount + '项' + '进度' +
                    orderDetail.per + '%' }}</view>
            </view>
            <view class="item-box">
                <view class="item dispaly-column-between" v-for="item in orderDetail.flows" :key="item">
                    <view class="time" v-if="item.createTime">{{ item.createTime }}</view>
                    <view class="co">{{ item.name }}</view>
                </view>
            </view>
        </view>

        <view class="common order-info" v-if="orderDetail.logs">
            <view class="title-box dispaly-just-between">
                <view class="dispaly-center ">
                    <view class="line"></view>
                    <view class="title">施工日志</view>
                </view>
            </view>
            <view class="log-list">
                <!-- <view class="log" v-for="item in orderDetail.logs" :key="item.id"
                    @click="$goUrl(`/subPackage/mine/logDetail?id=${item.id}&time=${item.createTime}&aId=${orderDetail.addrId}`)">
                    {{item.createTime }}日志</view> -->
                <view class="log-item" v-for="item in orderDetail.logs" :key="item.id">
                    <view class="user">{{ item.createName }}</view>
                    <view class="time">{{ item.createTime }}</view>
                    <view class="detail">{{ item.detail }}</view>
                    <view class="img-list">
                        <view class="img" v-for="(img, imageIndex) in item.image.split(',')" :key="imageIndex">
                            <image @click="priviewImage(item.image.split(','), imageIndex)" :src="img"
                                mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { getOrderDetail } from '@/api/apiList';
import { onLoad } from '@dcloudio/uni-app';


const id = ref('')
onLoad((option) => {
    id.value = option.id
    getOrder()
})

const show = ref(true)
const orderDetail = ref({})
const getOrder = async () => {
    const res = await getOrderDetail(id.value)
    if (res.code == 200) {
        orderDetail.value = res.data
        show.value = false
    }
}

// 图片预览
const priviewImage = (imgList, index) => {
    uni.previewImage({
        urls: imgList,
        current: index
    })
}


</script>
<style lang="scss" scoped>
.co {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #111111;
}

.co1 {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #747474;
    text-align: right;
}

.common {
    margin-bottom: 0;
}

.common {
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;
}

.main {
    padding: 30rpx 30rpx 0 30rpx;
    overflow: hidden;

    .pro {
        .pro-cover {
            margin-right: 20rpx;

            image {
                width: 140rpx;
                height: 140rpx;
                border-radius: 16rpx;
            }
        }

        .pro-right {
            width: 100%;
            height: 140rpx;

            .pro-top {

                .name,
                .num {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #111111;
                }
            }

            .pro-bottom {
                .spec {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #666666;
                }

                .price {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FB4E47;
                }
            }
        }
    }

    .order-info {
        .item-box {
            .item {
                .time {
                    margin-bottom: 20rpx;
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #999999;
                }
            }
        }

        .log-list {
            .log:last-child {
                margin-bottom: 0;
            }

            .log-item:last-child {
                margin-bottom: 0;
            }

            .log-item {
                border-bottom: 1rpx solid #eee;
                margin-bottom: 20rpx;
                padding-bottom: 20rpx;

                .img-list {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .img {
                        margin: 8rpx;

                        image {
                            width: 200rpx;
                            height: 200rpx;
                            border-radius: 18rpx;
                        }
                    }
                }

                .user {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #3E89FA;
                }

                .time {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #999;
                    margin-bottom: 36rpx;
                    margin: 15rpx 0;
                }

                .detail {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 25rpx;
                    color: #222;
                    margin-bottom: 20rpx;
                }
            }
        }

        .title-box {
            border-bottom: 1rpx solid #ddd;
            padding-bottom: 30rpx;
            margin-bottom: 20rpx;

            .more {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #111111;
            }

            .line {
                width: 4rpx;
                height: 20rpx;
                background: #FB4E47;
                border-radius: 2rpx;
                margin-right: 10rpx;
            }

            .title {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #111111;
            }
        }

        .one {
            display: flex;
            justify-content: space-between;
        }

        .item:last-child {
            margin-bottom: 0;
        }

        .item {
            margin-bottom: 30rpx;
        }
    }
}
</style>